<template>
  <div class="container">
    <el-container>
      <el-main>
        <div class="parentDiv">
          <div>
            <span>{{$t('profitAndLoAss.SystemNetProfitAndLoss')}}：$ 234.34M</span>
          <!-- K线图 -->
          <div id="myChart" :style="{width: '100%', height: '280px'}"></div>
          <!-- K线图 -->
          </div>
          <div>
            <span>{{$t('profitAndLoAss.InsurancePoolBalance')}}：$ 234.34M</span>
          <!-- K线图 -->
          <div id="myCharts" :style="{width: '100%', height: '280px'}"></div>
          <!-- K线图 -->
          </div>
        </div>
        <!-- "profitAndLoAss":{
    "Derivative":"合约",
    "UnrealizedProfit":"未实现盈利",
    "UnrealizedLoss":"未实现亏损",
    "NetProfitAndLoss":"净盈亏"
  } -->
        <p class="hisP">{{$t('profitAndLoAss.SystemProfitAndLossData')}}</p>
        <div class="tableDiv">
          <template>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%"
              :header-cell-style="{
                background: '#212432',
                color: '#505363',
                border: '0px solid #2f3241',
                fontSize: '15px'
              }"
              :cell-style="{
                background: '#2f3241',
                border: '0px ',
                fontSize: '13px'
              }"
            >
              <el-table-column>
                <template slot="header" slot-scope="">
                  <el-select
                    v-model="HYvalue"
                    placeholder="合约"
                    clearable
                    class="select"
                  >
                    <el-option
                      v-for="item in HYoptions"
                      :key="item.value"
                      :label="$t(item.label)"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template>
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.address }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" :label="$t('profitAndLoAss.UnrealizedProfit')+'（USDT）'"> </el-table-column>
              <el-table-column prop="address" :label="$t('profitAndLoAss.UnrealizedLoss')+'（USDT）'"> </el-table-column>
              <el-table-column prop="address" :label="$t('profitAndLoAss.NetProfitAndLoss')+'（USDT）'"> </el-table-column>
            </el-table>
          </template>
        </div>
      </el-main>
      <el-footer>
        <el-pagination background layout="prev, pager, next" :total="100">
        </el-pagination>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
// 自定义主题折线图
import theme from '../../../api/themeEcharts'
export default {
  data() {
    return {
      HYoptions: [
        {
          value: "1",
          label: "profitAndLoAss.Derivative"
        }
      ],
      HYvalue: "1",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: " 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: " 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: " 1516 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: " 1519 弄"
        }
      ]
    };
  },
     mounted(){
    this.drawLine();
  },
  methods: {
    drawLine(){
        // 基于准备好的dom，初始化echarts实例 参数2设置主题
        let myChart = this.$echarts.init(document.getElementById('myChart'),'customed')
        let myCharts = this.$echarts.init(document.getElementById('myCharts'),'customed')
        // 绘制图表
        myChart.setOption({
            // title: { text: '在Vue中使用echarts',
            //   link:"https://www.baidu.com/" ,
            //   textStyle:{},//设置标题的样式

            // },
            tooltip: { //信息提示
              trigger:"item", //触发类型
              // triggerOn:"click", //触发时机
              formatter:"{b} 交易量为{c}" //提示格式化
              // formatter: function(arg){
              //   console.log(arg)
              //   return arg.seriesName
              // }
            },
            toolbox:{ //工具箱
              feature:{
                // saveAsImage: {},//保存图片
                // dataView:{}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                // restore:{}, //配置项还原
                // dataZoom:{},//数据区域缩放
                // magicType: { //动态类型切换
                //   type: ['line', 'bar', 'stack', 'tiled']
                // }
              }
            },

            xAxis: {
              type:"category", //X轴
              // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
              data: ["1M","2M","3M","4M","5M","6M","7M","8M","9M","10M","11M","12M"],
              boundaryGap:false
            },
            yAxis: {
              type:"value", //Y轴
              scale:true
            },
            // legend:{
            //   data:["销量","name"]
            // },
            series: [ //系列列表 
              { 
                name: '销量',
                type: 'line',//控制图表类型
                barWidth:"10%",
                data:  [8,12,33,44,5,61,21,32,40,56,68,12],
                markPoint:{ //显示最大最小值
                  // data:[
                  //   {type:'max'},
                  //   {type:'min'}
                  // ]
                },
                markLine:{//显示平均值
                  // data:[
                  //   {type:"average"}
                  // ]
                },
                markArea:{ //标注区间
                  // data:[
                  //   [{
                  //     xAxis:'2月'
                  //   },{
                  //     xAxis:'3月'
                  //   }]
                  // ]
                },
                smooth:true, //平缓显示
                lineStyle:{
                  color:"#928535",
                  type:"solid"
                }, //折线样式
                areaStyle:{
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#928535'
                }, {
                    offset: 1,
                    color: '#112023'
                }])
                }
              }]
        });
        // 绘制图表
        myCharts.setOption({
            // title: { text: '在Vue中使用echarts',
            //   link:"https://www.baidu.com/" ,
            //   textStyle:{},//设置标题的样式

            // },
            tooltip: { //信息提示
              trigger:"item", //触发类型
              // triggerOn:"click", //触发时机
              formatter:"{b} 交易量为{c}" //提示格式化
              // formatter: function(arg){
              //   console.log(arg)
              //   return arg.seriesName
              // }
            },
            toolbox:{ //工具箱
              feature:{
                // saveAsImage: {},//保存图片
                // dataView:{}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                // restore:{}, //配置项还原
                // dataZoom:{},//数据区域缩放
                // magicType: { //动态类型切换
                //   type: ['line', 'bar', 'stack', 'tiled']
                // }
              }
            },

            xAxis: {
              type:"category", //X轴
              // data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
              data: ["1M","2M","3M","4M","5M","6M","7M","8M","9M","10M","11M","12M"],
              boundaryGap:false
            },
            yAxis: {
              type:"value", //Y轴
              scale:true
            },
            // legend:{
            //   data:["销量","name"]
            // },
            series: [ //系列列表 
              { 
                name: '销量',
                type: 'line',//控制图表类型
                barWidth:"10%",
                data:  [8,12,33,44,5,61,21,32,40,56,68,12],
                markPoint:{ //显示最大最小值
                  // data:[
                  //   {type:'max'},
                  //   {type:'min'}
                  // ]
                },
                markLine:{//显示平均值
                  // data:[
                  //   {type:"average"}
                  // ]
                },
                markArea:{ //标注区间
                  // data:[
                  //   [{
                  //     xAxis:'2月'
                  //   },{
                  //     xAxis:'3月'
                  //   }]
                  // ]
                },
                smooth:true, //平缓显示
                lineStyle:{
                  color:"#0a5533",
                  type:"solid"
                }, //折线样式
                areaStyle:{
                   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#0a5533'
                }, {
                    offset: 1,
                    color: '#112023'
                }])
                }
              }]
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.container {
  max-width: 1107px;
}
.el-table::before,
.el-table--group::after,
.el-table--border::after {
  content: "";
  position: absolute;
  background-color: #2f3241 !important;
}
.el-main {
  // height: 912px;
  background: #13141f;
  overflow: hidden;
  .hisP {
    width: 1080px;
    font-size: 16px;
    font-family: PingFangSC-Semibold;
    line-height: 25px;
    color: #e2e4ee;
  }
  .tableDiv {
    height: 545px;
    background: #2f3241;
  }
}
.el-footer {
  height: 43px;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.parentDiv{
  display: flex;
  div{
    flex: 1;
    font-size: 13px;
    font-family: DINbek Bold;
    font-weight: bold;
    color: #E2E4EE;
  }
}
</style>
